<script setup>
	import { listApi } from '@/apis/task.js'
	//  导入 hook 函数
	import { useList } from '@/hooks/index.js'
	const { list, hasMore, loadMore, isTriggered, resetList } = useList(listApi, 1)
</script>

<template>
	<scroll-view refresher-enabled :refresher-triggered="isTriggered" @refresherrefresh="resetList"
		@scrolltolower="loadMore" scroll-y class="scroll-view">
		<view class="scroll-view-wrapper">
			<view v-for="pickup in list" :key="pickup.id" class="task-card">
				<navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${pickup.id}`">
					<view class="header">
						<text class="no">任务编号: {{ pickup.transportTaskId }}</text>
						<!-- <text class="status">已延迟</text> -->
					</view>
					<view class="body">
						<view class="timeline">
							<view class="line">{{ pickup.startAddress }}</view>
							<view class="line">{{ pickup.endAddress }}</view>
						</view>
					</view>
				</navigator>
				<view class="footer">
					<view class="label">提货时间</view>
					<view class="time">{{ pickup.planDepartureTime }}</view>
					<navigator v-if="pickup.enablePickUp" hover-class="none" :url="`/subpkg_task/pickup/index?id=${pickup.id}`"
						class="action">
						提货
					</navigator>
					<navigator v-else hover-class="none" url=" " class="action disabled">
						提货
					</navigator>
				</view>
			</view>
			<view v-if="list.length ===0" class="task-blank">无待提货物</view>
		</view>

		<!--  没有更多数据了显示 -->
		<view class="noMore" v-if="hasMore === false">
			亲，没有更多数据了...
		</view>

	</scroll-view>
</template>

<style lang="scss" scoped>
	@import './styles.scss';
</style>